<template>
  <table border="1px">
    <thead>
      <td class="table-item">套餐类型</td>
      <td class="table-item"></td>
      <td class="table-item"></td>
      <td class="table-item" v-if="table[0] && table[0].Pname"></td>
    </thead>
    <tbody>
      <tr v-for="item in table" :key="item.Title">
        <td class="table-item" :rowspan="item.rowspan" v-if="item.Pname && item.rowspan != 1">
          <el-radio v-model="radio" :label="item.Pid" @change="handleRadioChange">{{ item.Pname }}</el-radio>
        </td>
        <td class="table-item" style="text-align: left; padding: 10px 20px">
          <el-checkbox :label="item.Title" v-model="item.selected" :disabled="item.disabled" @change="optChange(item)">
          </el-checkbox>
        </td>
        <td class="table-item">
          <span style="cursor: pointer; color: #409eff" @click="handleViewService(item)">{{ item.selected ? item.text1 : '' }}</span>
        </td>
        <td class="table-item">
          <span style="cursor: pointer; color: #409eff">{{ item.selected ? item.text2 : '' }}</span>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- 查看套餐 -->
  <ViewService
    :list="viewServiceList"
    :show="showViewServiceDialog"
    @handleCloseViewService="handleCloseViewService"
  ></ViewService>
</template>

<script lang="ts">
import { apiContractServiceTemplate } from '@/api/contract'
import { defineComponent, ref } from 'vue'
import ViewService from './ViewService.vue'
export default defineComponent({
  props: {
    ProductId: Number,
    service: {
      type: Array,
      default: () => []
    },
    isDetail: {
      type: Boolean,
      default: () => false
    }
  },
  components: {
    ViewService
  },
  setup(props) {
    let viewServiceList = ref([]) //查看套餐数据
    let showViewServiceDialog = ref(false) //是否展示查看套餐弹窗
    // 点击查看报价单
    const handleViewService=(e:any)=>{
      if(e.text1==='查看报价单'){
        showViewServiceDialog.value=true
        let arr:any=[{...e}]
        viewServiceList.value=arr
      }
    }
    //关闭查看套餐弹窗
    const handleCloseViewService = () => {
      showViewServiceDialog.value = false
      viewServiceList.value = []
    }

    let radio = ref(0)

    let table: any = ref([])
    // 获取套餐模板数据
    const getContractServiceTemplate = async () => {
      let res = await apiContractServiceTemplate({ ProductId: props.ProductId })
      if (res.Ret === 200) {
        initTableData(res.Data)
      }
    }

    // 初始化表格数据
    const initTableData = (data: any) => {
      flatArr(data)
      // 回显
      if (props.service) {
        temArr.value.forEach((item: any) => {
          props.service.forEach((e: any) => {
            if (e.ServiceTemplateId === item.ServiceTemplateId) {
              item.selected = true
              item.Value = e.Value
              if (e.Value) {
                item.text2 = '下载报价单'
              }
            }
          })
        })
      }

      table.value = temArr.value
    }

    //展开数据
    let temArr: any = ref([])
    const flatArr = (arr: any) => {
      arr.forEach((item: any) => {
        if (item.Children) {
          item.Children = item.Children.map((item2: any, index: number) => {
            return {
              ...item2,
              Pname: item.Title,
              PSelectType: item.SelectType,
              rowspan: index === 0 ? item.Children.length : 1
            }
          })
          flatArr(item.Children)
        } else {
          temArr.value.push({
            ...item,
            selected: false,
            disabled: false,
            text1: item.Detail ? (props.isDetail ? '查看报价单' : '选择品种') : '查看报价单',
            text2: item.Value ? '下载报价单' : ''
          })
        }
      })
    }

    //单选框变化
    const handleRadioChange = () => {
      table.value = table.value.map((item: any) => {
        item.selected = false
        if (item.Pid != radio.value) {
          item.disabled = true
        } else {
          item.disabled = false
        }
        return item
      })
    }

    //多选框变化
    const optChange = (e: any) => {
      radio.value = e.Pid //设置radio
      if (e.SelectType === 'radio') {
        if (e.selected) {
          table.value = table.value.map((item: any) => {
            if (item.SelectName === e.SelectName && item.ServiceTemplateId != e.ServiceTemplateId) {
              item.disabled = true
              item.selected = false
            }
            return item
          })
        } else {
          table.value = table.value.map((item: any) => {
            if (item.SelectName === e.SelectName && item.ServiceTemplateId != e.ServiceTemplateId) {
              item.disabled = false
              item.selected = false
            }
            return item
          })
        }
      }

      table.value = table.value.map((item: any) => {
        if (item.Pid != radio.value) {
          item.disabled = true
          item.selected = false
        }
        return item
      })
    }

    getContractServiceTemplate()
    return {
      table,
      radio,
      optChange,
      handleRadioChange,
      viewServiceList,
      showViewServiceDialog,
      handleViewService,
      handleCloseViewService
    }
  }
})
</script>

<style lang="scss" scoped>
table {
  border: 1px solid #ebeef5;
  border-collapse: collapse;
  font-size: 14px;
  thead {
    background-color: #f0f2f5;
  }
}
.table-item {
  padding: 10px;
  min-width: 200px;
  box-sizing: border-box;
  text-align: center;
}
</style>
